<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jquery.serializeObject.js"></script>
    <script type="text/javascript" src="../locale/easyui-lang-zh_CN.js"></script>
    <style>
        html,body{
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>

<table id="dg" style="height: 92%; width: 100%">
    <input class="easyui-searchbox" data-options="prompt:'输入关键词进行搜索',searcher:doSearch" style="width:300px"></input>
</table>
<div id="dlg" class="easyui-dialog" title="添加用户" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:360px;padding:10px">

    <form id="ff" method="post" >
        <table cellpadding="5">
            <tr>
                <td>用户id:</td>
                <td><input type="text" name="_id" ></input></td>
            </tr>
            <tr>
            <tr>
                <td>用户名:</td>
                <td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input class="easyui-textbox" type="text" name="password" data-options="required:true,validType:'password'"></input></td>
            </tr>
            <tr>
                <td>电子邮箱:</td>
                <td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
            </tr>
            <tr>
                <td>住址:</td>
                <td><input class="easyui-textbox" type="text" name="address" data-options="required:true,validType:'password'"></input></td>
            </tr>
        </table>
    </form>
    <div style="text-align:center;padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清空</a>
    </div>

</div>
</div>

</body>
</html>
<script>
	function doSearch(value){
			$('#dg').datagrid('load', {
		name: value,
		address: 'ho'
	});
	}
	function submitForm(){
		$('#ff').form('submit',{
			onSubmit:function(){
				if($(this).form('enableValidation').form('validate')) {
					var data=$('#ff').serializeObject();
					console.log(data._id&&data._id.trim().length>0);
					if (data._id && data._id.trim().length>0){
                        $.ajax({
						    method:'put',
							url:'http://localhost:3000/users/data/' + data._id,
							data:data
					}).done(function (res) {
							$('#dlg').dialog('close');
							$('#dg').datagrid('reload');
							$.messager.alert('提示信息','更改成功！');
						})
                    }else {
						delete data._id;
//						ajax请求
                    $.ajax({

                        method:'post',
                        url:'http://localhost:3000/users/data',
                        data:data
                    }).done(function (res) {
						$('#dlg').dialog('close');
						$('#dg').datagrid('reload');
						$.messager.alert('提示信息','添加成功！');
					})
                    }
//
				}else {
					//表单验证错误
					$.messager.alert('提示信息','信息输入有误！');
                }
				console.log($(this).form('enableValidation').form('validate'));
				return $(this).form('enableValidation').form('validate');
			}
		});
	}
	function clearForm(){
		$('#ff').form('clear');
	}
	var toolbar = [{
		text:'Add',
		iconCls:'icon-add',
		handler:function(){
			$("#dlg").dialog('open')
        }
	},{
		text:'删除',
		iconCls:'icon-cancel',
		handler:function(){


			$.messager.confirm('Confirm', '确定删除这条信息吗？', function(r){
				if (r){
					// exit action;
					var gss=$('#dg').datagrid('getSelections');
					var ids=[];
					var gLength=gss.length;
					for(var i=0; i<gLength;i++ ){
						ids.push(gss[i]._id);
					}
					console.log(ids.toString());
					$.ajax({
						url:'http://localhost:3000/users/deletes',
						method:'post',
						data:{ids:ids.toString()}
					}).done(function (res) {
						if (res.status===200){
							$.messager.alert('提示信息','删除成功！');
						}else {
							$.messager.alert('提示信息','删除失败！');
						}
						$("#dg").datagrid("reload");
					})
				}
			});


		}
	},'-',{
		text:'返回',
		iconCls:'icon-back',
		handler:function(){
				$('#dg').datagrid('load', {
					name:"",
					address: 'ho'
				});
		}
	}];
	$('#dg').datagrid({
        toolbar:toolbar,
        pagination:true,
//		onBeforeSelect:function(){
//			return false;
//		},
        method:'post',
		url:'http://localhost:3000/users/list',
		columns:[[
			{field:'ck',checkbox:true},
			{field:'_id',title:'id',width:100},
			{field:'name',title:'用户名',width:100},
			{field:'password',title:'用户密码',width:100},
			{field:'email',title:'电子邮箱',width:100},
			{field:'address',title:'住址',width:100},
			{field:'opt',title:'操作',width:100,
            formatter:function (value,row,index) {
                return "<a style='background: #036ecb;color: white;text-decoration:none;text-align:center;border-radius:5px;display:inline-block;width: 35px;height: 20px' href='javascript:void(0)' id='edit' onclick='editDate()' >编辑<a/>" +
                    " <a style='background: orangered;color: white;text-decoration:none;text-align:center;border-radius:5px;display:inline-block;width: 35px;height: 20px' href='javascript:void(0)' id='delete' onclick='del()'>删除</a>"
			}}

		]],
        onDblClickRow(index,row){
			editDate(row);
		}
	});
	function editDate(row) {
		$('#dlg').dialog('open');
        $('#ff').form('load',row);
	}

	function del(){


		$.messager.confirm('Confirm', '确定删除这条信息吗？', function(r){
			if (r){
				// exit action;
				var gss=$('#dg').datagrid('getSelections');
				var ids=[];
				var gLength=gss.length;
				for(var i=0; i<gLength;i++ ){
					ids.push(gss[i]._id);
				}
				console.log(ids.toString());
				$.ajax({
					url:'http://localhost:3000/users/deletes',
					method:'post',
					data:{ids:ids.toString()}
				}).done(function (res) {
					if (res.status===200){
						$.messager.alert('提示信息','删除成功！');
					}else {
						$.messager.alert('提示信息','删除失败！');
					}
					$("#dg").datagrid("reload");
				})
			}
		});
	}


</script>